<template>
	<view class="loginContainer">
		<view>
			<view class="uni-form-item uni-column flex inputBox2" style="margin-top: 10px;">
				<view class="title">身份类型：</view>
				<picker mode="selector" :range="userTypeList" @change="changeUserTypeSelect">
					<view class="inputBox">{{userTypeList[userTypeIdx]}}</view>
				</picker>
			</view>
			<view class="uni-form-item uni-column flex inputBox2" style="margin-top: 10px;">
				<view class="title">姓名：</view>
				<input class="uni-input inputVal" v-model="userName" placeholder="请输入姓名" />
			</view>
			<view class="uni-form-item uni-column flex inputBox2">
				<view class="title">学号/工号：</view>
				<input class="uni-input inputVal" v-model="studentNo" placeholder="请输入学号/工号" />
			</view>
			<view class="uni-form-item uni-column flex inputBox2">
				<view class="title">手机号：</view>
				<input class="uni-input inputVal" v-model="mobilePhone" type="number" maxlength="11"
					placeholder="请输入手机号" />
			</view>
			<view class="uni-form-item uni-column flex inputBox2">
				<view class="title">申请使用：</view>
				<picker mode="selector" :range="schoolList" @change="changeSelect">
					<view class="inputBox">{{schoolList[schoolIdx]}}</view>
				</picker>
			</view>
			<button class="loginBtnBox" @click="h5Register()">注册</button>
			<view class="flex" style="justify-content:flex-end;">
				<view style="padding-right: 98rpx;color: red;" @click="goLogin">登录</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				userInfo: {},
				schoolDataList: [],
				schoolList: ['请选择实验室'],
				schoolIdx: 0,
				userTypeDataList: [0, 1],
				userTypeList: ['请选择身份类型', '学生', '老师'],
				userTypeIdx: 0,
				randomt: '', //时间戳随机数，获取图片用
				messageUrl: '', //图形验证码图片地址
				imgCode: '', //输入的图形验证码
				userName: '',
				studentNo: '',
				mobilePhone: '', //手机号

			}
		},
		onLoad() {
			// this.searchSchoolList();
		},
		methods: {
			goLogin() {
				// #ifdef H5
				// window.location.href = 'http://room.lib.hunnu.edu.cn/guoshiH5/index.html#/pages/index/index';
				uni.reLaunch({
					url: '/pages/authorizeLogin',
				});
				// #endif	
			},
			searchSchoolList() {
				let _this = this;
				_this.$utils.requestFun('/stadium/stadium/api/getH5WaitApplyClassroomListApi', {
					channelId: getApp().globalData.channelId,
					userType: _this.userTypeDataList[_this.userTypeIdx - 1]
				}, 'GET').then(res => {
					console.log(res)
					let dataList = [];
					_this.schoolList = ['请选择实验室']
					_this.schoolDataList = []
					if (res.data.data && res.data.data.length > 0) {
						for (let i = 0; i < res.data.data.length; i++) {
							dataList.push(res.data.data[i].laboratoryName);
						}
						_this.schoolDataList = res.data.data;
						_this.schoolList = _this.schoolList.concat(dataList);
					}
				});
			},
			// 判断验证是否符合要求
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					uni.showToast({
						title: this.rules[key].msg,
						icon: 'none'
					});
					bool = false;
					return false;
				}
				return bool;
			},
			//选择下拉框
			changeSelect(e) {
				console.log(e)
				this.schoolIdx = e.target.value;
			},
			//选择下拉框
			changeUserTypeSelect(e) {
				this.userTypeIdx = e.target.value;
				if (this.userTypeIdx != 0) {
					this.searchSchoolList();
				} else {
					this.schoolList = ['请选择实验室']
					this.schoolDataList = []
					this.schoolIdx = 0
				}
			},
			verifityForm() {
				if(this.userTypeIdx == 0) {
					uni.showToast({
						title: "请选择身份类型！",
						icon: 'none'
					})
					return false;
				}
				if (this.userName == '') {
					uni.showToast({
						title: "请输入姓名！",
						icon: 'none'
					});
					return false;
				} else if (this.studentNo == '') {
					uni.showToast({
						title: "请输入学号或工号！",
						icon: 'none'
					});
					return false;
				} else if (this.mobilePhone == '') {
					uni.showToast({
						title: "请输入手机号码！",
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			h5Register() {
				let _this = this;
				if (this.verifityForm()) {
					let classroomId = '' 
					if(_this.schoolIdx != 0){
						classroomId = _this.schoolDataList[_this.schoolIdx-1].laboratoryId
					}
					uni.request({
						url: getApp().globalData.serverUrl + '/auth/H5Api/api/userRegisterApi',
						data: {
							channelId: getApp().globalData.channelId,
							appId: getApp().globalData.appid,
							mobilePhone: _this.mobilePhone,
							userName: _this.userName,
							studentNo: _this.studentNo,
							userType: _this.userTypeDataList[_this.userTypeIdx-1],
							classroomId: classroomId
						},
						method: 'GET',
						success(res) {
							if (res.data.code == "10000") {
								let _info = '登录账号：'+_this.mobilePhone+'\r\n\r\n初始化密码为：'+res.data.data;
								uni.showModal({
									title: '提示',
									showCancel:false,
									content: _info,
									success: function(res) {
										// #ifdef H5
										uni.reLaunch({
											url: '/pages/authorizeLogin'
										})
										// #endif	
									}
								});
								
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style>
	.loginContainer {
		width: 100%;
		height: 100vh;
		background: #FFFFFF;
		overflow: hidden;
	}

	.txtOverFlow {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.flex {
		display: flex;
	}

	.loginIcon {
		width: 369rpx;
		height: 369rpx;
		display: block;
		margin: 0 auto;
		margin-top: 31rpx;
	}

	.selectSchoolBox {
		width: 88%;
		height: 98rpx;
		line-height: 98rpx;
		margin: 80rpx 45rpx 45rpx 45rpx;
		background: #F6F6F6;
		border-radius: 49rpx;
	}

	.inputBox {
		margin-left: 46rpx;
	}

	.moreIcon3 {
		width: 66rpx;
		height: 16rpx;
		position: absolute;
		right: 20px;
		top: 43%;
	}

	.loginBtnBox {
		width: 88%;
		height: 98rpx;
		line-height: 98rpx;
		margin: 80rpx 45rpx 45rpx 45rpx;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 49rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.wxIcon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 13rpx;
		margin-top: 36rpx;
		margin-left: 34%;
	}

	.inputBox2 {
		width: 85%;
		height: 30px;
		line-height: 30px;
		border: 1px solid #efefef;
		border-radius: 10px;
		margin: 0 auto;
		padding: 10px 0 10px 10px;
		margin-bottom: 10px;
	}

	.inputVal {
		margin-top: 4px;
		/* width: 85%; */
	}

	.imgCodeUrl {
		width: 242px;
		height: 30px;
		margin-right: 14px;
	}
</style>
